<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$info.title}</title>
    <link href="__STATIC__/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__STATIC__/weibo/css/style.css" rel="stylesheet">
    <script type="text/javascript" src="__STATIC__/admin/js/jquery.min.js"></script>
    <script type="text/javascript" src="__STATIC__/weibo/js/jquery.json.js"></script>
    <script type="text/javascript" src="__STATIC__/admin/js/layer/layer.js" ></script>




    <style>
        .content{padding:10px;}
        .title{width:100%;font-size:22px; font-weight: bold;}
        .title1{width:100%;font-size:14px; color: #ccc;padding: 8px 0;}
        .zan{ margin:0 auto; height:30px; line-height:30px;text-align: center; }
        .num{height: 30px; line-height:30px;float:left;}
        .pl{padding-left:20%}
        .foot{width:100%; position: fixed;height:40px; bottom: 0;background:#fff;line-height:40px;}
        .footli{width:100%;float:left;text-align:center;line-height:40px;padding: 0; margin: 0 auto;}
        .fleft{float: left; text-align: center;}
        .fleft a {width:40px;height:30px;}
        .pinglun{background:#00a0e9; color:#fff;}
        a{ text-decoration:none;}
        .comm{width: 100%;padding-top: 10px; margin-bottom: 10px;}
        .c_img{float: left;width: 15%;margin: 0 auto;text-align: center;padding-top: 20px;}
        .p1{height: 25px;line-height: 25px; padding: 0;margin: 0;font-size:12px;}
        .p2{line-height: 25px;padding: 0;margin: 0;font-size:12px;}
        .p3{height: 25px;line-height: 25px;padding: 0;margin: 0;font-size:12px; padding-bottom: 15px;}
        .c_left{float: left;width: 85%;}

        .biaoti{border-bottom:1px #ccc solid; font-size:18px; line-height:30px;height:30px;}
    </style>
</head>
<body style="background:#F7F7F7;">


<div id="content" class="content" >
    <div><img src="/uploads/images/{$info.photo}" width="100%"></div>
    <div class="biaoti">标题:{$info.title}</div>
    <div class="biaoti">正方:{$info.zhengfang}</div>
    <div class="biaoti">反方:{$info.fanfang}</div>
    <div class="">内容:{$info.content}</div>



    <input id="now" type="hidden" value="">
    <input id="all" type="hidden" value="{$all}">

    <div id="comment_list">
        <div id="pingluns">

        </div>
        <div style="height: 60px;">
            &nbsp; &nbsp; &nbsp;
        </div>
    </div>



</div>
<div style="height: 50px;">&nbsp;</div>
<div  id="foot" class="foot" >

    <a  href="javascript:;" onclick="pinglun({$user_id})"><div class="footli pinglun" > 评  论</div></a>

</div>


<div id="pinglun"  style="display: none;">
    <div style="height: 45px; line-height: 45px; border-bottom:1px #ccc solid;">
        <div style="float: left;width:15%;text-align: center;"><a href="javascript:;" onclick="cancel_pinglun()" style="color: #ccc;"><i class="fa fa-arrow-left"></i></a></div>
        <div style="float: left;width:70%;text-align: center">发表评论</div>
        <div style="float: left;width:15%;text-align: center;font-size:14px;"><a href="javascript:;" onclick="send_pinglun({$user_id},{$id})"><span style="border:1px #ccc solid;padding: 4px 8px;border-radius: 5px;color: #ccc;">发表</span></a></div>
    </div>
    <div>
        <select name="type" id="type">
            <option value="1">支持正方</option>
            <option value="2">支持反方</option>
        </select>
    </div>
    <div style="width: 100%;height:250px;background:#fff;" id="pinglun_msg"  contenteditable="true">


    </div>

</div>

<script type="text/javascript">
    AjaxPage();
    $(window).scroll(
            function() {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                if (scrollTop + windowHeight == scrollHeight) {
                    AjaxPage();
                }
            });

    function AjaxPage(){
        var now =  $('#now').val();
        var all =  $('#all').val();
        var info_id = '{$id}';
        if(now==''){
            now =1 ;
        }
        if(now<=all){
            $.post('{:url("index/debate_list")}',
                    {id:info_id,page:now},
                    function(data){
                        if(data.code==1) {
                            // console.log(data.list[0].addtime);
                            $html = '';
                            for(c in data.list){
                                //data.list[c].addtime
                                $html = $html + "<div class='comm' ><div class='c_img'><img src='/uploads/face/"+data.list[c].head_img+"' width='30px'></div><div class='c_left'><p class='p1' style=''>"+data.list[c].nickname+"</p><p class='p2' style=''>"+data.list[c].note+"</p><p class='p2' style=''>"+data.list[c].content+"</p><p class='p3' style=''>"+data.list[c].add_time+"</p></div></div>";
                            }

                            $("#pingluns").append($html);

                        }
                    });

            var next = now + 1;
            $('#now').val(next) ;

        }
    }

    function dianzan(id){
        $.post('{:url("index/zan_status")}',
                {id:id},
                function(data){
                    if(data.code==11){
                        layer.msg(data.msg,{icon:5,time:1500,shade: 0.1,});
                        window.location.href="{:url('user/login')}";
                    }else {
                        if(data.code==1){
                            $('#zan').attr('src','__STATIC__/index/images/zan.png') ;
                            document.getElementById('zan1').innerHTML = data.count;
                            layer.msg(data.msg,{icon:1,time:1500,shade: 0.1,});
                        }else{
                            $('#zan').attr('src','__STATIC__/index/images/zan1.png') ;
                            document.getElementById('zan1').innerHTML = data.count;
                            layer.msg(data.msg,{icon:5,time:1500,shade: 0.1,});
                        }
                    }

                });
    }
    function shoucang(id){
        $.post('{:url("index/collect_status")}',
                {id:id},
                function(data){
                    if(data.code==11){
                        layer.msg(data.msg,{icon:5,time:1500,shade: 0.1,});
                        window.location.href="{:url('user/login')}";
                    }else{
                        if(data.code==1){
                            $('#collect').attr('src','__STATIC__/index/images/collect.png') ;
                            document.getElementById('collect1').innerHTML = data.count;
                            layer.msg(data.msg,{icon:1,time:1500,shade: 0.1,});
                        }else{
                            $('#collect').attr('src','__STATIC__/index/images/collect1.png') ;
                            document.getElementById('collect1').innerHTML = data.count;
                            layer.msg(data.msg,{icon:5,time:1500,shade: 0.1,});
                        }
                    }
                });
    }

    function pinglun(i){
        if(i==0){
            layer.msg('您尚未登录！',{icon:5,time:1500,shade: 0.1,});
            window.location.href="{:url('user/login')}";
        }
        document.getElementById('content').style.display = 'none';
        document.getElementById('foot').style.display = 'none';
        document.getElementById('pinglun').style.display = 'block';
    }

    function cancel_pinglun(){
        document.getElementById('pinglun').style.display = 'none';
        document.getElementById('content').style.display = 'block';
        document.getElementById('foot').style.display = 'block';
    }


    function send_pinglun(user_id,info_id){

        var content = document.getElementById('pinglun_msg').innerHTML;
        var type = document.getElementById('type').value;

        if(type==1){
            cc = '支持正方';
        }else{
            cc = '支持反方';
        }

        $.post('{:url("index/debate_comment")}',
                {id:info_id,user_id:user_id,content:content,type:type},
                function(data){
                    if(data.code==1) {
                        layer.msg(data.msg,{icon:1,time:1500,shade: 0.1,});

                        $html ="<div class='comm' ><div class='c_img'><img src='"+data.list.img+"' width='30px'></div><div class='c_left'><p class='p1' style=''>"+data.list.nickname+"</p><p class='p2' style=''>"+cc+"</p><p class='p2' style=''>"+data.list.content+"</p><p class='p3' style=''>"+data.list.add_time+"</p></div></div>";
//
                        $("#pingluns").prepend($html);

                        document.getElementById('pinglun').style.display = 'none';
                        document.getElementById('content').style.display = 'block';
                        document.getElementById('foot').style.display = 'block';

                    }else{
                        layer.msg(data.msg,{icon:5,time:1500,shade: 0.1,});
                    }
                });
    }


</script>


</body>
</html>